<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器权重</title>
		<style>
			.d{/* 权值 10 */
				background-color: #d0fff0;
			}
			div{/* 权值 1 */
				background-color: #d9ffff;
			}
			# d1{/* 权值 100 */
				background-color: #fdffc5;
			}
			*{/* 权值 0 */
				background-color: #ffdfcf;
			}
			#div:hover{/* 伪类 算和 权值 110 */
				background-color: #d0ceff;
			}
			/* 加权写法：元素选择器+任意选择器【组合】 */
			div#d1{/* 权值 101 */
				background-color: #ffeed4;
			}
		</style>
	</head>
	<body>
		<!-- 选择器存在权值，所学所有选择器抓同一个元素 
	  (不建议)内联样式表               权值：1000
		     id选择器                 权值：100
			 类选择器、伪类选择器      权值：10
			 元素选择器               权值：1
			 通用选择器               权值：0
			 权值算和：派生、子代、兄弟，权值高优先执行
			   (不建议)破坏优先级      效果优先执行--属性值  !important
		-->
		<div id="d1" class="d" style="background-color: #fbffa4;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, laudantium deleniti. Voluptate quia minima quod at, doloribus sunt a praesentium quam alias rem, repellendus in, cumque vitae deleniti! Alias, ipsam.</div>
	</body>
</html>